import React, { useState, useEffect } from 'react';
import { Editor, Toolbar } from '@wangeditor/editor-for-react';
import '@wangeditor/editor/dist/css/style.css'; // 引入样式

const WangEditorDemo = () => {
  // 存储编辑器内容（HTML 格式）
  const [html, setHtml] = useState('<p>初始内容</p>');
  // 存储编辑器实例
  const [editor, setEditor] = useState(null);

  // 编辑器初始化完成时触发
  const handleEditorChange = (editor) => {
    setEditor(editor); // 保存实例
  };

  // 内容变化时触发
  const handleChange = (value) => {
    setHtml(value); // 更新内容
  };

  // 组件卸载时销毁编辑器（避免内存泄漏）
  useEffect(() => {
    return () => {
      if (editor) {
        editor.destroy();
      }
    };
  }, [editor]);

  // 手动获取内容
  const getContent = () => {
    if (editor) {
      const content = editor.getHtml();
      console.log('编辑器内容:', content);
    }
  };

  return (
    <div style={{ border: '1px solid #ccc', borderRadius: '4px', width: '100%', margin: '20px auto' }}>
      {/* 工具栏 */}
      <Toolbar
        editor={editor}
        defaultConfig={{
          // 配置工具栏按钮（默认全量，可按需删减）
          toolbarKeys: [
            'bold', 'italic', 'underline', 'through', // 文本样式
            '|', // 分隔线
            'fontSize', 'fontFamily', 'bgColor', // 字体设置
            '|',
            'header1', 'header2', 'header3', // 标题
            '|',
              'todo', // 列表
            '|',
            'insertLink', 'insertImage', 'insertTable', // 插入内容
            '|',
            'codeBlock', 'divider', 'emotion', // 其他功能
            '|',
            'undo', 'redo' // 撤销/重做
          ]
        }}
        style={{ borderBottom: '1px solid #ccc' }}
      />

      {/* 编辑区域 */}
      <Editor
        defaultConfig={{
          placeholder: '请输入内容...',
          // 图片上传配置（需后端接口支持）
          MENU_CONF: {
            insertImage: {
              // 自定义上传逻辑
              async customUpload(file) {
                // 1. 创建 FormData
                const formData = new FormData();
                formData.append('file', file);

                // 2. 调用后端接口上传
                const res = await fetch('/api/upload-image', {
                  method: 'POST',
                  body: formData
                });
                const data = await res.json();

                // 3. 返回图片 URL（格式必须是 { url: 'xxx' }）
                return { url: data.url };
              }
            }
          }
        }}
        value={html}
        onChange={handleChange}
        onCreated={handleEditorChange}
        style={{ height: '400px', overflowY: 'auto' }}
      />

      {/* 操作按钮 */}
      <div style={{ padding: '10px', textAlign: 'right' }}>
        <button onClick={getContent} style={{ padding: '6px 12px', cursor: 'pointer' }}>
          获取内容
        </button>
      </div>
    </div>
  );
};

export default WangEditorDemo;